<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>leafletMap</title>
    <link rel="stylesheet" href="leaflet/js/lib/font-awesome/css/font-awesome.min.css">
    <script src="leaflet/js/lib/jquery/jquery-3.5.1.js" type="application/javascript"></script>

    <link rel="stylesheet" href="leaflet/js/lib/layui/css/layui.css">
    <script src="leaflet/js/lib/layui/layui.all.js" type="application/javascript"></script>
    <link rel="stylesheet" href="leaflet/js/lib/ecgs16/css/css.css">

    <link rel="stylesheet" href="leaflet/js/lib/leaflet/leaflet.css" />
    <script src="leaflet/js/lib/leaflet/leaflet-src.js" type="application/javascript"></script>

    <script src="leaflet/js/lib/leaflet/plugins/providers/proj4.js" type="application/javascript"></script>
    <script src="leaflet/js/lib/leaflet/plugins/providers/proj4leaflet.js" type="application/javascript"></script>
    <script src="leaflet/js/lib/leaflet/plugins/providers/leaflet.ChineseTmsProviders.js" type="text/javascript"></script>

    <link rel="stylesheet" href="leaflet/js/lib/leaflet/plugins/markercluster/MarkerCluster.css">
    <link rel="stylesheet" href="leaflet/js/lib/leaflet/plugins/markercluster/MarkerCluster.Default.css">
    <script src="leaflet/js/lib/leaflet/plugins/markercluster/leaflet.markercluster-src.js" type="application/javascript"></script>

    <link rel="stylesheet" href="leaflet/js/lib/leaflet/plugins/mousePos/L.Control.MousePosition.css"></link>
    <script src="leaflet/js/lib/leaflet/plugins/mousePos/L.Control.MousePosition.js"></script>

    <link rel="stylesheet" href="leaflet/js/lib/leaflet/plugins/search/leaflet-search.src.css">
    <script src="leaflet/js/lib/leaflet/plugins/search/leaflet-search.src.js" type="application/javascript"></script>

    <link rel="stylesheet" href="leaflet/js/lib/leaflet/plugins/measure/leaflet-measure.css"/>
    <script src="leaflet/js/lib/leaflet/plugins/measure/leaflet-measure.js" type="application/javascript"></script>

    <script src="leaflet/js/lib/leaflet/plugins/html2canvas/html2canvas.js" type="application/javascript"></script>
    <script src="leaflet/js/app/leafletplugin/exportMap/exportMap.js" type="application/javascript"></script>

    <script src="leaflet/js/lib/leaflet/plugins/sides/leaflet-side-by-side.js" type="application/javascript"></script>

    <link rel="stylesheet" href="leaflet/js/lib/leaflet/plugins/sidebar/leaflet-sidebar.css">
    <script src="leaflet/js/lib/leaflet/plugins/sidebar/leaflet-sidebar.js" type="application/javascript"></script>

    <script src="leaflet/js/lib/vr/three.min.js" type="application/javascript"></script>
    <script src="leaflet/js/lib/vr/src/sphoords.js"></script>
    <script src="leaflet/js/lib/vr/src/PhotoSphereViewer.js" type="application/javascript"></script>
    <script src="leaflet/js/lib/vr/src/PSVNavBar.js" type="application/javascript"></script>
    <script src="leaflet/js/lib/vr/src/PSVNavBarButton.js" type="application/javascript"></script>
    <script src="leaflet/js/app/vr.js" type="application/javascript"></script>

    <script src="leaflet/js/lib/leaflet/plugins/echart/echarts.js" type="application/javascript"></script>
    <script src="leaflet/js/lib/leaflet/plugins/echart/leaflet-echarts.js" type="application/javascript"></script>
    <script src="leaflet/js/app/leafletplugin/chart/controlChart.js" type="application/javascript"></script>
    <script src="leaflet/js/app/leafletplugin/chart/tabChart.js" type="application/javascript"></script>
    <script src="leaflet/js/app/leafletplugin/chart/layerChart.js" type="application/javascript"></script>
    <script src="leaflet/js/app/leafletplugin/chart/markerChart.js" type="application/javascript"></script>
    <script src="leaflet/js/app/leafletplugin/slider/slider_chart.js" type="application/javascript"></script>

    <script src="leaflet/js/lib/leaflet/plugins/slider/leaflet-timeline-slider.js" type="application/javascript"></script>

    <script src="leaflet/js/lib/leaflet/plugins/heatmap/simpleheat.js" type="application/javascript"></script>
    <script src="leaflet/js/lib/leaflet/plugins/heatmap/leaflet-heat.js" type="application/javascript"></script>
    <script src="leaflet/js/app/leafletplugin/heatmap/heatmap.js" type="application/javascript"></script>

    <script src="leaflet/js/app/leafletplugin/basemap.js" type="application/javascript"></script>
    <script src="leaflet/js/app/devAPI.js" type="application/javascript"></script>
    <script src="leaflet/js/app/getgongyi.js" type="application/javascript"></script>
    <script src="leaflet/js/app/popupContent.js" type="application/javascript"></script>
    <script src="leaflet/js/app/syllmap.js" type="application/javascript"></script>
    <style type="text/css">
        html, body { width: 100%; height: 100%; margin: 0; }
        #divmap { width: 100%; height: 100%; }

        .floatPanel{
            /*position: fixed;*/
            left: 15px;
            top: 50px;
            width: 100px;
            height: 100px;
        }
        .leaflet-popup-tip {
            /* background: white; */
            color: #72ff33;
            box-shadow: 0 3px 14px #fffb33;
        }
        .lorem {
            font-style: italic;
            color: #AAA;
        }
        /* Custom icon style */
        .leaflet-echart-icon {
            transition: all 1s;
        }

        .controlChart {
            width: 700px;
            height: 450px;
            background-color: rgba(255, 255, 255, 0.52);
        }
    </style>
</head>
<body>
<div id="sidebar" class="sidebar collapsed">
    <!-- Nav tabs -->
    <div class="sidebar-tabs">
        <ul role="tablist">
            <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
            <li><a href="#profile" role="tab"><i class="fa fa-area-chart"></i></a></li>
            <li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
            <li><a href="https://github.com/googlegis/leafletmap" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
        </ul>

        <ul role="tablist">
            <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
        </ul>
    </div>

    <!-- Tab panes -->
    <div class="sidebar-content">
        <div class="sidebar-pane" id="home">
            <h1 class="sidebar-header">
                站点
                <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
            </h1>
            <div style="padding: 5px;">
                <input type="checkbox" id="chkcluster" value="cluster" title="cluster">聚合</input>
                <input type="checkbox" id="chktooltip" value="tooltip" title="cluster">标注</input>
                <input type="checkbox" id="chkScroll" value="Scroll" title="Scroll">卷帘</input>
                <button id="btnExport" type="button" value="export">保存</button>
                <button id="btnPrint" type="button" value="print">打印</button>
            </div>
            <div id="treeDiv" class="demo-tree-more" style="padding-top: 10px;">

            </div>
        </div>

        <div class="sidebar-pane" id="profile">
            <h1 class="sidebar-header">巡检<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
            <div style="padding: 5px;">
                <input type="checkbox" id="chkLL" value="liu" title="泵房瞬时流量历史曲线图">泵房瞬时流量曲线图</input>
            </div>
            <div style="padding: 5px;">
                <input type="checkbox" id="chkYL" value="liu" title="泵房压力历史数据雷达图">泵房压力历史数据雷达图</input>
            </div>
            <div style="padding: 5px;">
                <input type="checkbox" id="chkWarn" value="warn" title="泵房报警时空专题图">泵房报警时空专题图</input>
            </div>

            <div style="padding: 5px;">
                <input type="checkbox" id="chkzongHe" value="zonghe" title="泵房综合数据实时数据图">泵房综合数据实时数据图</input>
            </div>

            <div style="padding: 5px;">
                <input type="checkbox" id="chkHeatStation" value="station" title="泵房位置热力图">泵房位置热力图</input>
            </div>

            <div style="padding: 5px;">
                <input type="checkbox" id="chkHeatWarn" value="station" title="泵房报警时空热力图">泵房报警时空热力图</input>
            </div>
        </div>

        <div class="sidebar-pane" id="messages">
            <h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
        </div>

        <div class="sidebar-pane" id="settings">
            <h1 class="sidebar-header">设置<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
        </div>
    </div>
</div>
<div id="divmap" class="sidebar-map"></div>

<script>

        let syllMap = new SYLLMap({
                mapId:"divmap",
                treeId:"treeDiv"
        });

        syllMap.initialMap();

        document.getElementById("btnExport").addEventListener("click",function () {
            syllMap.exportMap();
        })

        document.getElementById("btnPrint").addEventListener("click",function () {
            window.print();
        })

        document.getElementById("chkcluster").addEventListener("change",function () {
            let chkcluster = document.getElementById("chkcluster");

            syllMap.setCLuster(chkcluster.checked);

            syllMap.addStations();
        });

        document.getElementById("chktooltip").addEventListener("change",function () {

            let chkShowTip = document.getElementById("chktooltip");

            syllMap.ToggleTooltip(chkShowTip.checked);
        });

        document.getElementById("chkScroll").addEventListener("change",function () {

            let chkScroll = document.getElementById("chkScroll");

            syllMap.setSideBySide(chkScroll.checked);
        });

        //所有泵房流量历史数据柱状图
        document.getElementById("chkLL").addEventListener("change",function () {
            let chkLL = document.getElementById("chkLL");
            let title = chkLL.title;
            syllMap.setMarkerChart(chkLL.checked,title);

        });

        //泵房压力历史数据时空图
        document.getElementById("chkYL").addEventListener("change",function () {
            let chkYL = document.getElementById("chkYL");
            let title = chkYL.title;
            syllMap.setSlider(chkYL.checked,title,'marker');
        });

        //泵房报警历史数据时空图
        document.getElementById("chkWarn").addEventListener("change",function () {
            let chkWarn = document.getElementById("chkWarn");
            let title = chkWarn.title;
            syllMap.setSlider(chkWarn.checked,title,'layer');
        });

        //单个综合数据实时图
        document.getElementById("chkzongHe").addEventListener("change",function () {
            let chkzongHe = document.getElementById("chkzongHe");
            let title = chkzongHe.title;
            syllMap.setControlChart(chkzongHe.checked,title);

        });

        //泵房区域热力图
        document.getElementById("chkHeatStation").addEventListener("change",function () {
            let chkHeatStation = document.getElementById("chkHeatStation");
            let title = chkHeatStation.title;
            syllMap.setHeatLayer(chkHeatStation.checked,title);
        });

        //泵房区域热力图
        document.getElementById("chkHeatWarn").addEventListener("change",function () {
            let chkHeatWarn = document.getElementById("chkHeatWarn");
            let title = chkHeatWarn.title;
            syllMap.setSlider(chkHeatWarn.checked,title,'heat');
        });

</script>
</body>
<!--实时数据弹出窗口-->
<div id="divTab"  class="layui-tab layui-tab-card" style="display: none;"></div>
<!--工艺图弹出窗口 -->
<div id="divGongYi" class="ecgs-l" style="display: none;">
    <div id="divGy" class="layui-carousel">
        <div carousel-item id="divGongYiItem" >
            <div id="deviceData1">
                <img src="leaflet/js/lib/ecgs16/img/device16.png" class="d-block w-100" alt="...">
            </div>
            <div id="deviceData2" class="ecgs-fir box-shadow">
                <img src="leaflet/js/lib/ecgs16/img/device16.png" class="d-block w-100" alt="...">
            </div>
            <div id="deviceData3" class="ecgs-fir box-shadow">
                <img src="leaflet/js/lib/ecgs16/img/device16.png" class="d-block w-100" alt="...">
            </div>
        </div>
    </div>
    <div id="shuizhiDiv" class="ecgs-ss box-shadow">
        <div class="body-title"><h3 id="shuizhiTitle">圆梦苑泵房水质监测</h3></div>
        <div id="szdiv"  class="ecgs-sscon clearfix2">
            <div class="ecgs-ssli fl"><div class="ecgs-sstxt"><div class="ecgs-sstab"><p>提升泵1频率</p><span>0</span></div></div></div>
            <div class="ecgs-ssli fl"><div class="ecgs-sstxt"><div class="ecgs-sstab"><p>提升泵1频率</p><span>0</span></div></div></div>
            <div class="ecgs-ssli fl"><div class="ecgs-sstxt"><div class="ecgs-sstab"><p>提升泵1频率</p><span>0</span></div></div></div>
            <div class="ecgs-ssli fl"><div class="ecgs-sstxt"><div class="ecgs-sstab"><p>提升泵1频率</p><span>0</span></div></div></div>
            <div class="ecgs-ssli fl"><div class="ecgs-sstxt"><div class="ecgs-sstab"><p>提升泵1频率</p><span>0</span></div></div></div>
            <div class="ecgs-ssli fl"><div class="ecgs-sstxt"><div class="ecgs-sstab"><p>提升泵1频率</p><span>0</span></div></div></div>

        </div>
    </div>
</div>

<div id="vrcontainer" style="display: none;"></div>

</html>